<template>
  <view class="home-container">
    <view style="padding: 10rpx;">
      <u-search placeholder="请输入搜索的文章" v-model="keyword" @search="searchArt" @blur="searchArt"
        @clear="getData"></u-search>
    </view>
    <view class="content">
      <view @click="goDetail(item._id)" class="item" v-for="item in listArr" :key="item._id">
        <view class="text">
          <view class="title">{{item.title}}</view>
          <view class="info">
            <text>{{item.author}}</text>
            <uni-dateformat :date="item.publish_date" :threshold="[60000, 3600000]" format="MM-dd"></uni-dateformat>
          </view>
        </view>

        <view class="pic">
          <image v-if="item.thumbnail && item.thumbnail.length" mode="aspectFill" :src="item.thumbnail[0]"></image>
          <image v-else-if="item.thumbnail.length==0&&module=='运动'" mode="aspectFill"
            src="https://img.51miz.com/Element/00/58/58/39/44114eda_E585839_32af2871.png"></image>
          <image v-else-if="item.thumbnail.length==0&&module=='健康'" mode="aspectFill"
            src="https://bpic.588ku.com/element_origin_min_pic/23/04/25/00d50fab71dd225fb0318db8bc8b7c43.jpg"></image>
        </view>
      </view>
      <uni-load-more v-if="noMore" status="noMore"></uni-load-more>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        listArr: [],
        noMore: false,
        keyword: '',
        module: '',
        category_id: ''
      }
    },
    async onLoad(option) {
      this.module = option.module
      if (this.module == '健康') {
        uni.setNavigationBarTitle({
          title: '健康咨询'
        })
      } else if (this.module == '运动') {
        uni.setNavigationBarTitle({
          title: '运动与健康'
        })
      }
      let res = await uniCloud.callFunction({
        name: "article",
        data: {
          flag: 0,
          name: this.module
        }
      })
      this.category_id = res.result.data[0]._id
      this.getData();
    },
    //触底方法
    onReachBottom() {
      this.getData()
    },
    //下拉刷新
    onPullDownRefresh() {
      this.listArr = []
      this.noMore = false
      this.getData();
    },

    methods: {
      searchArt(e) {
        uniCloud.callFunction({
          name: "article",
          data: {
            flag: 3,
            keyword: e,
            category_id: this.category_id
          }
        }).then(res => {
          this.listArr = res.result.data
        })
      },
      //跳转到详情页
      goDetail(e) {
        uni.navigateTo({
          url: "/pages/article-detail/article-detail?id=" + e
        })
      },


      //获取数据库的列表
      getData() {
        uniCloud.callFunction({
          name: "article",
          data: {
            flag: 1,
            skip: this.listArr.length,
            category_id: this.category_id
          }
        }).then(res => {
          console.log(res);
          if (res.result.data.length < 8) {
            this.noMore = true
          }
          let oldList = this.listArr;
          let nsList = [...oldList, ...res.result.data]
          this.listArr = nsList
          uni.stopPullDownRefresh()
        })
      },


    }
  }
</script>

<style lang="scss" scoped>
  .home-container {
    .content {
      padding: 30rpx;

      .item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;

        .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 20rpx;

          .title {
            font-size: 44rpx;
            color: #333;
            text-align: justify;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .info {
            font-size: 28rpx;
            color: #888;

            text {
              padding-right: 20rpx;
            }
          }
        }

        .pic {
          width: 260rpx;
          height: 180rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>